(function () {
	let tem = '<span class="pagination">' +
				'<ul>' +
				'<li @click="controlPage(1)"><a class="lastPage" :class="{darkLight: curPage === 1}">首页</a></li>' +
					'<li @click="controlPage(curPage-1)"><a class="lastPage" :class="{darkLight: curPage === 1}">上一页</a></li>' +
					'<li v-for="page in pages" @click="controlPage(page)">' +
						'<a class="page" :class="{highLight: curPage === page}" >{{ page }}</a>' +
					'</li>' +
					'<li @click="controlPage(curPage+1)"><a :class="{darkLight: curPage === totalPages}" class="nextPage">下一页</a></li>' +
					'<li @click="controlPage(totalPages)"><a :class="{darkLight: curPage === totalPages}" class="nextPage">尾页</a></li>' +
					'<li><span class="page-and-total control-input"><input class="form-control" v-model="movePage"/></span></li>' +
					'<li @click="controlPage(movePage)"><a class="nextPage">跳转</a></li>' +
					'<li ><div class="page-and-total">第{{curPage}}页&nbsp;共{{totalPages}}页 &nbsp;共{{total}}条 &nbsp;&nbsp;每页&nbsp;<select v-model="pageSize"'+
					' @change="chooseSelect(pageSize)" ><option v-for="v in pageSizeOptions" v-bind:value="v" >{{v}}</option></select>&nbsp;条</div></li>' +
				'</ul>' +'</span>'
	let pagination = Vue.extend({
		template: tem,
		props: {
			movePage: {
				type: Number,
				default: 1,
				required: true
			},
			pageSize: {
				type: Number,
				default: 10,
				required: true
			},
			pageSizeOptions: {
				type: Array,
				default: [1,5,10],
				required: true
			},
			showPages: {
				type: Number,
				default: 3,
				required: true
			},
			totalPages: {
				type: Number,
				default: 10,
				required: true
			},
			total: {
				type: Number,
				default: 1,
				required: true
			},
			curPage: {
				type: Number,
				default: 2,
				required: true
			},
			onChange: {
				type: Function,
				default:function(){
					console.log('onChange:'+this.curPage)
				},
				required: true
			}
		},
		computed: {
			pages () {
				let left = 1,
					right = this.totalPages,
					movePoint = Math.ceil(this.showPages / 2),
					pages = [];
				if (this.curPage > movePoint && this.curPage < this.totalPages - movePoint + 1) {
					left = this.showPages % 2 === 0 ? this.curPage - movePoint : this.curPage - movePoint + 1;
					right = this.curPage + movePoint - 1;
				} else if (this.curPage <= movePoint) {
					left = 1;
					right = this.showPages;
				} else {
					left = this.totalPages - this.showPages + 1;
					right = this.totalPages;
				}

				while (left <= right) {
					pages.push(left);
					left++;
				}
				return pages;
			}
		},
		methods: {
			controlPage (page) {
				if (page > this.totalPages) {
					return false;
				} else if (page < 1) {
					return false;
				}
				if (this.curPage != page) {
					this.curPage = page;
					//alert(this.curPage)
					this.onChange(1,this.curPage)
 				} 
			},
			chooseSelect (pageSize){
				//console.log(pageSize,"select")
				this.pageSize = pageSize
				this.onChange(2,pageSize)
			}
		}
	})

	window.pagination = pagination;	
//	pagination.$watch('pageSize', function(newValue, oldValue) {
//		console.log(newValue, oldValue,"pageSize") // 输出 2 1
//	})
})()